<template>
  <div class="chart-content">
    <div class="chart-header">
      <RadioGroup v-model:value="timeRange" size="small">
        <RadioButton value="day">今日</RadioButton>
        <RadioButton value="week">本周</RadioButton>
        <RadioButton value="month">本月</RadioButton>
      </RadioGroup>
    </div>
    <BaseChart :options="chartOptions" height="300px" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { RadioGroup,RadioButton } from 'ant-design-vue'
import BaseChart from './BaseChart.vue'
import type { EChartsOption } from 'echarts'

const timeRange = ref('day')

const chartOptions = computed<EChartsOption>(() => ({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['门诊量', '急诊量', '住院量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '门诊量',
      type: 'line',
      smooth: true,
      data: [30, 40, 120, 180, 150, 80, 70],
      itemStyle: {
        color: '#1890ff'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(24,144,255,0.3)'
          }, {
            offset: 1,
            color: 'rgba(24,144,255,0.1)'
          }]
        }
      }
    },
    {
      name: '急诊量',
      type: 'line',
      smooth: true,
      data: [20, 25, 35, 45, 40, 35, 30],
      itemStyle: {
        color: '#ff4d4f'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(255,77,79,0.3)'
          }, {
            offset: 1,
            color: 'rgba(255,77,79,0.1)'
          }]
        }
      }
    },
    {
      name: '住院量',
      type: 'line',
      smooth: true,
      data: [820, 825, 830, 835, 840, 845, 850],
      itemStyle: {
        color: '#52c41a'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(82,196,26,0.3)'
          }, {
            offset: 1,
            color: 'rgba(82,196,26,0.1)'
          }]
        }
      }
    }
  ]
}))
</script>

<style scoped lang="less">
.chart-content {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1rem;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

    h3 {
      font-size: 1.125rem;
      font-weight: 500;
      color: #1f2937;
    }
  }
}
</style> 